<!--动态表单-->
<!--参考链接：https://blog.csdn.net/wojiaomaxiaoqi/article/details/81632721-->
<template>
  <div class='home'>
    <el-form
      class="dynamic-form"
      :inline="config.inline"
      :model="value"
      :label-position="config.labelPosition"
      :label-width="config.labelWidth"
      :size='config.size'
      :status-icon="config.statusIcon"
    >
      <el-col
        :span="item.span"
        v-for="item in config.formItemList"
        :key="item.key"
        v-if="value[item.key] !== undefined"
      >
        <dynamic-form-item
          :item="item"
          :value="value[item.key]"
          @input="handleInput($event, item.key)"
        >
        </dynamic-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
  /* 动态表单项 */
  import DynamicFormItem from './dynamicFormItem.vue'

  export default {
    name: 'DynamicForm',
    /**
     * 案例
     // 初始化数据
     this.someConfig = {
          inline: true,
          labelPosition: 'right',
          labelWidth: '160px',
          size: 'small',
          statusIcon: true,
          formItemList: [
            {
              'type': 'input',
              'key': 'name',
              'label': '姓名',
              'value': '',
              'disable': false,
              'readonly': false,
              'placeholder': '请输入姓名',
              'subtype': 'text'
            },
            {
              'type': 'select',
              'key': 'gender',
              'label': '性别',
              'value': '',
              'disable': true,
              'readonly': true,
              filterable: false,
              clearable: false,
              'options': [
                {
                  'value': '1',
                  'label': '男',
                  'disabled': false
                },
                {
                  'value': '0',
                  'label': '女',
                  'disabled': false
                }
              ]
            }
          ]
        }
     this.someData = {
          name: 'Genji',
          gender: '1'
        }
     */
    props: {
      // 保存列表页面传过来的数据，子组件接受父组件数据
      config: {
        type: Object,
        required: true
      },
      value: {
        type: Object,
        required: true
      }
    },
    components: {
      DynamicFormItem
    },
    data() {
      return {
      }
    },
    // 执行一次，且第一次执行
    mounted() {
      this.init()
      this.first = true
    },
    // 组件被激活，第一次不执行
    activated() {
      // this.param父组件改变该属性值
      if (this.first) {
        this.first = false
        return
      }
      // 刷新数据
      this.search(this.param)
    },
    methods: {
      init() {},
      search() {},
      // 输入框事件
      handleInput(val, key) {
        // 这里element-ui没有上报event，直接就是value了
        this.$emit('input', { ...this.value, [key]: val })
      }
    }
  }
</script>

<style scoped>
  /*让文本可以被选中*/
  .home {
    -moz-user-select: text; /*火狐*/
    -webkit-user-select: text; /*webkit浏览器*/
    -ms-user-select: text; /*IE10*/
    -khtml-user-select: text; /*早期浏览器*/
    user-select: text;
  }
</style>
